An important part of a desktop application is the ability to show notifications and once again, HTML5
simplifies this for us.
Now, showing notifications is not to be confused with the ability to push notifications to the app.
That is a completely separate topic and doesn't really concern electronic, but rather notorious.
I've linked to some node push notification libraries and information in the lessened resources.
HDMI five notifications then simply allows us to trigger a system notification.
The main difference being that when used in a standard browser will first have to obtain permissions
to display such a notification, whereas an electron we're granted permission automatically.
Let's see an example again, working in the renderer as this is an HTML5 API.
Remove this require statement calling new notification with the notification title as the first argument
electron app and an options object as the second.
This can take a number of options, but to keep things simple, add a body which is the main message
in the notification, some notification info.
Note that this body text is restricted to a set number of characters for the given operating system,
200 characters for newer versions of Windows and 256 bytes for Mac.
Save this, reload the app and there we have it.
A simple notification with our set title body and app icon.
In this case, the default electron icon, the default behavior for clicking such a notification being
simply to focus the app window responsible for showing it.
We can see this by unfocussed the app, which means we'll have to delay the notification for a second
or two to do so.
Add a timeout.
Creating this same notification inside of this time out after, say, two seconds save.
I'll reload the app this time and immediately unfocussed it by clicking on my desktop, reload unfocussed.
Click the notification and the app window is focused, there's notification also provides several other
events besides a simple click handler, we can access these on the notification instance, so assign
its return value to notification.
Then to change the notifications, click handler said it's unclick property, making that a function
with the click event as its only argument, which are logout.
Save again.
Reload, which triggers the notification.
Click and there we see the notifications click event, which contains a number of very useful properties,
like, for example, the ability to prevent the default behavior of focusing the app or the timestamp
of the click.
This notification instance also provides on show or unclosed handlers.
So having access to the notification event, we can directly affect our app with them.
For example, let's say we want to actually show our app window when a notification is clicked, not
simply focus it.
The first thing we'll need is a reference to this browser window instance, main window, which we can
get from the main process using a simple ipsi call.
So ipsi invoke in the renderer and ipsi handle in the main process, returning a reference to this main
window instance or alternatively and slightly easier, we can use remote.
Which solution you choose will of course depend on your app.
I'll demonstrate using remote.
So step one is enabling the remote module for the main window where we'll be using it, setting on this
windows where preferences enable remote module to true, allowing us to require the remote module back
in the renderer or main window.
Concert remote equals require electron then to get a reference to this window from the main process,
I'll assign to self remote doget current window.
Check if this window is visible, when the notification is clicked, if not self-taught, is visible
self being a browser window instance call self dot show.
So as soon as I save these two files now causing the app to reload, I'll minimize the main window in
order to demonstrate this save.
Minimize the window.
And when I click the notification, the app window is shown, so another very simple but powerful HTML5
API for us to use in our electronic apps.